<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/jquery-3.3.1.min.js"></script>
    <script>
        function doData() {
            $('#hello').data('name','alice')
            $('#hello').data('age',20)
            console.log($('#hello').data('name'));
            console.log($('#hello').data('age'));

            $('#hello').removeData('name')
            console.log($('#hello').data('name'));
            console.log($('#hello').data('age'));
        }

        function doProperty() {
            console.log($('#world').attr('data-id'));
            console.log($('#world').attr('data-options'));

            var obj = JSON.parse($('#world').attr('data-options'))
            console.log(obj);
        }
    </script>
</head>
<body>
    <button onclick="doData()">数据操作</button>
    <button onclick="doProperty()">自定义属性</button>
    <hr>

    <div id="hello">wbs22081</div>
    <div id="world" aaa="bbb" data-id="9527" data-options='{"username":"tom","password":"111"}' layui-filter="welcome">itany</div>
</body>
</html>